<template>
  <div class="PanelFuc">
    <van-collapse v-model="activeNames">
      <van-collapse-item v-for="(v, i) of panelData" :key="i" :name="v.MENU_NAME" :title="v.meta.title">
        <div v-for="(vv, ii) of v.children" :key="ii" class="p-y-2" @click="clickItem(vv)">{{ vv.meta.title }}</div>
        <!-- {{ vv.meta.title }} - {{ vv.path }} 保留原代码-->
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
  import { defineComponent, reactive, toRefs } from 'vue'
  import { Collapse, CollapseItem } from 'vant'
  export default defineComponent({
    name: 'MenuList',
    components: {
      [Collapse.name]: Collapse,
      [CollapseItem.name]: CollapseItem,
    },
    props: {
      panelData: {
        type: Array,
        default() {
          return []
        },
      },
    },
    emits: ['clickitem'],
    setup(props, context) {
      let PanelFuc = reactive({
        activeNames: ['1'],
        panelData: props.panelData,
      })

      function clickItem(item) {
        context.emit('clickitem', item)
      }
      return { ...toRefs(PanelFuc), clickItem }
    },
  })
</script>

<style lang="scss">
  .PanelFuc {
    background: #fff !important;
    height: 100% !important;
    font-size: 1rem !important;
    .van-cell {
      background: #f5f5f7 !important;
      font-weight: bold !important;
      text-align: left !important;
      font-size: 1rem !important;
      padding: 15px !important;
      margin: 0px 15px;
      width: calc(100% - 30px);
    }
    .van-cell__title {
      font-size: 1rem !important;
    }
    .van-collapse-item {
      margin: 20px 0px !important;
    }
    .van-collapse-item__wrapper,
    .van-collapse-item__content {
      margin: 0px 15px;
      width: calc(100% - 30px);
      background: #f5f5f7 !important;
      text-align: left !important;
      font-size: 1rem !important;
    }
    .p-y-2 {
      padding: 0.5rem 0px !important;
    }
  }
</style>
